<template>
  <el-dialog
    title="设置品类费率"
    :visible.sync="setRateVisible"
    :before-close="closeDialog"
    width="47%"
  >
    <div style="height: 60vh; overflow: auto">
      <div
        v-for="(item, index) in sourceForm"
        :key="index"
        class="itemDiv flex align-center"
      >
        <div class="leftDiv" />
        <div class="rate_div">
          <el-form
            :inline="true"
            :model="item"
            class="demo-form-inline"
          >
            <el-form-item label="订单来源设置：" class="firstlabel">
              <el-select
                v-model="item.source_id"
                placeholder="请选择订单来源"
                style="width: 170px"
                @change="changeSourceId"
              >
                <el-option
                  v-for="item in sourceList"
                  :key="item.id"
                  :label="item.source_name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
            <!-- <el-form-item label="合同" class="itemlabel" prop="smartcontract">
              <el-input
                v-model="item.smartcontract"
                placeholder="0"
              />
              <span class="itemlabel">元</span>
            </el-form-item>
            <el-form-item label="实名认证" class="itemlabel" prop="realname">
              <el-input v-model="item.realname" placeholder="0" />
              <span class="itemlabel">元</span>
            </el-form-item> -->
            <el-form-item label="平台" class="itemlabel" prop="platform">
              <el-input v-model="item.platform" placeholder="8.00" />
              <span class="itemlabel">%</span>
            </el-form-item>
            <el-form-item label="保费" class="itemlabel" prop="withhold">
              <el-input v-model="item.withhold" placeholder="1.60" />
              <span class="itemlabel">%</span>
            </el-form-item>
            <el-form-item label="存证" class="itemlabel" prop="file">
              <el-input v-model="item.file" placeholder="0.45" />
              <span class="itemlabel">%</span>
            </el-form-item>
            <el-form-item class="delBtn">
              <el-button type="text" @click="deleteFrom(item, index)">删除</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <p class="p">
        手续费类型可选填，填写的手续费类型将显示到账单手续费明细中
      </p>
      <el-button
        type="primary"
        icon="el-icon-plus"
        @click="addSource"
      >新增订单来源</el-button>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="closeDialog">取消</el-button>
      <el-button type="primary" @click="submitSource('sourceForm')">保存</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  props: {
    setRateVisible: {
      type: Boolean,
      default: false
    },
    // setRateData: {
    //   type: Array,
    //   default: () => [],
    // },
    sourceList: {
      type: Array,
      default: () => []
    },
    sourceForm: {
      type: Array,
      default: () => []
    },
    selectVal: {
      type: String
    }
  },
  data() {
    var checkCode = (rule, value, callback) => {
      const reg = /^(([1-9][0-9]*)|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/
      if (!value) {
        callback(new Error('请输入数字'))
      } else if (!reg.test(value)) {
        callback(new Error('费率为正数且最多两位小数'))
      } else {
        callback()
      }
    }
    return {
      rules: {
        // smartcontract: [
        //   { required: true, message: '请输入合同费用', trigger: 'blur' },
        //   { validator: checkCode, trigger: 'blur' }
        // ],
        // realname: [
        //   { required: true, message: '请输入实名认证费用', trigger: 'blur' }
        // ],
        platform: [
          { required: true, message: '请输入平台费用', trigger: 'blur' }
        ],
        withhold: [
          { required: true, message: '请输入代扣费率', trigger: 'blur' }
        ],
        file: [
          { required: true, message: '请输入存证费率', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    changeSourceId(val) {
      this.$emit('changeSourceId', val)
    },
    closeDialog(param) {
      this.$emit('closeDialog', param)
    },
    deleteFrom(item, index) {
      this.$emit('deleteFrom', item, index)
    },
    addSource(param) {
      this.$emit('addSource')
    },
    submitSource(formName) {
      let flag = false
      this.sourceForm.smartcontract = '0'
      this.sourceForm.realname = '0'
      this.sourceForm.forEach((item) => {
        for (var key in item) {
          if (key == 'source_id' && !item[key]) {
            this.$message.error('请选择订单来源')
            flag = false
            return false
          } else if (key != 'source_id' && key != 'is_delete') {
            if (!item[key]) {
              this.$message.error('请确保已设置费率')
              flag = false
              return false
            } else if (item[key]) {
              var isNum = /^(([1-9][0-9]*)|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/
              if (!isNum.test(item[key])) {
                this.$message.error('费率为正数且最多两位小数')
                flag = false
                return false
              } else {
                flag = true
                return
              }
            }
          } else {
            flag = true
          }
        }
      })
      if (this.sourceForm.length > 1) {
        const ids = this.sourceForm.map((item) => item.source_id)
        const idsSet = new Set(ids)
        if (idsSet.size != ids.length) {
          this.$message.error('订单来源不能重复')
          flag = false
          return false
        } else {
          flag = true
        }
      }
      // console.log('flag',flag)
      if (flag) {
        this.$emit('submitSource', this.sourceForm)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
// .tableTitle {
//   font-size: 16px;
//   font-family: Microsoft YaHei;
//   font-weight: 400;
//   color: #333333;
//   text-align: center;
//   line-height: 35px;
// }
.itemDiv {
  background: #f5f5f5;
  padding: 8px 20px;
  position: relative;
  margin-bottom: 20px;
  .leftDiv {
    width: 300px;
  }
  .firstlabel {
    width: 300px;
    position: absolute;
    top: 40%;
    left: 15px;
  }
  .delBtn {
    position: absolute;
    top: 40%;
    right: 15px;
  }
}
.rate_div {
  width: 55%;
  border-left: 1px solid #e6e6e6;
  border-right: 1px solid #e6e6e6;
  padding: 0 12px;
  .el-form .el-input {
    width: 80px;
  }
  .itemlabel {
    padding: 0 10px;
    background: #e6e6e6;
  }
}
.p {
  font-size: 14px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #cccccc;
  line-height: 40px;
}
</style>
